<template>
  <div style="height: 100%;">
    <el-card class="box-card">
      <div slot="header">班级成绩查询</div>
      <div style="margin-bottom: 5px;">
        <el-select v-model="bjId" placeholder="请选择班级" @change="onSelectChange" clearable >
          <el-option v-for="item,x in bjs" :key="x" :label="item.className" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="classGradeListHeight">
        <el-table :data="data" size="small" v-if="tableVisible" border >
          <el-table-column v-for="(col,index) in columnAttribes" :key="index" :label="col" :prop="col"></el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        bjId: '',
        bjs:[],
        columnAttribes:[],
        tableAttribe:{},
        headerStyle:{
          backgroundColor:'#ddd'
        },
        tableVisible:false,
        data:[]
      }
    },
    created() {
      this.$ajax.post('tbclass/page',{}).then(res=>{
        var result=res.data;
        this.bjs=result.data.rows;
      }).catch(err=>{})
    },
    methods:{
      onSelectChange(val){
        if(val){
          this.tableVisible=true;
          this.$ajax.post('grade/classGradeList',{bjId:val}).then(res=>{
            var result=res.data;
            this.columnAttribes=result.data.colNames;
            this.data=result.data.tableData;
            this.tableVisible=true;
          })
        }else{
          this.tableVisible=false;
        }
      }
    }

  }
</script>

<style>
.classGradeListHeight{
  height: calc(100% - 37px);
}

</style>
